<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>easy-支付页面</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../libs/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../css/public.css" media="all" />
	<script type="text/javascript" src="../libs/layui/layui.js"></script>
	<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="layui-bg-gray" style="padding: 16px;">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">商品信息</div>
				<div class="layui-card-body">
					<table class="layui-table">
						<colgroup>
							<col width="100">
							<col width="200">
							<col width="100">
							<col width="200">
							<col width="100">
							<col width="200">
						</colgroup>
						<thead>
						<tr>
							<th>订单号</th>
							<td id="orderNo"></td>
							<th>标题</th>
							<td id="subject"></td>
							<th>商品描述</th>
							<td id="description"></td>
						</tr>
						</thead>
						<tbody>
						<tr>
							<th>总金额</th>
							<td id="totalAmount"></td>
							<th>创建时间</th>
							<td id="createTime"></td>
							<th>过期时间</th>
							<td>暂时没加这个逻辑</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<div class="layui-card" style="padding:10px;">
				<div class="layui-card-header">选择支付宝支付方式</div>
				<div class="layui-card-body" style="height:80px;">
					<div class="layui-center custom-div">
						<a lay-event="alipay_pc" lay-filter="payLink">
							<img src="../img/pay/icon/alipay_pc.svg" alt="支付宝" style="max-width: 100%;">
							<p>支付宝支付方式</p>
						</a>
					</div>
					<div class="layui-center custom-div">
						<a href="your_alipay_link">
							<img src="../img/pay/icon/alipay_app.svg" alt="支付宝" style="max-width: 100%;">
							<p>支付宝APP支付</p>
						</a>
					</div>
					<div class="layui-center custom-div">
						<a href="your_alipay_link">
							<img src="../img/pay/icon/alipay_qr.svg" alt="支付宝" style="max-width: 100%;">
							<p>支付宝扫码支付</p>
						</a>
					</div>
					<div class="layui-center custom-div">
						<a href="your_alipay_link">
							<img src="../img/pay/icon/alipay_wap.svg" alt="支付宝" style="max-width: 100%;">
							<p>支付宝WAP网站支付</p>
						</a>
					</div>
					<div class="layui-center custom-div">
						<a href="your_alipay_link">
							<img src="../img/pay/icon/alipay_bar.svg" alt="支付宝" style="max-width: 100%;">
							<p>支付宝条形码支付</p>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<div class="layui-card" style="padding:10px;">
				<div class="layui-card-header">选择微信支付方式</div>
				<div class="layui-card-body" style="height:80px;">
					<div class="layui-center custom-div">
						<a href="your_alipay_link">
							<img src="../img/pay/icon/wx_app.svg" alt="微信" style="max-width: 100%;">
							<p>微信app支付</p>
						</a>
					</div>
					<div class="layui-center custom-div">
						<a href="your_alipay_link">
						    <img src="../img/pay/icon/wx_lite.svg" alt="微信" style="max-width: 100%;">
						    <p>微信小程序支付</p>
						</a>
					</div>
					<div class="layui-center custom-div">
						<a href="your_alipay_link">
							<img src="../img/pay/icon/wx_pub.svg" alt="微信" style="max-width: 100%;">
							<p>微信JSPAI支付</p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	function getURLParameter(name) {
		const urlParams = new URLSearchParams(window.location.search);
		return urlParams.get(name);
	}
	const orderId = getURLParameter('orderId');
	let url = "/order/get?orderId="+orderId;
	let appId = '';
	let code ='';
	$.post(url,function(data) {
		appId = data.data.payAppid;
		//渲染图表
		$("#orderNo").text(data.data.orderNo);
		$("#subject").text(data.data.subject);
		$("#description").text(data.data.description);
		$("#totalAmount").text(data.data.totalAmount);
		$("#createTime").text(data.data.createTime);
		$("#expire_time").text(data.data.expire_time);
	})

	const paymentLinks = document.querySelectorAll('[lay-event]');
	paymentLinks.forEach(link => {
		link.addEventListener('click', function () {
			const layEvent = link.getAttribute('lay-event');
			switch (layEvent) {
				case 'alipay_pc':
					var formData = {
						orderId:  orderId,
						payAppid:  appId,
						code:  "alipay_pc",
					};
					// 处理支付宝PC支付方式点击的逻辑
                    $.post({
						url: "/pay/submit",
						data: formData,
						success: function (data){
							//跳转模式
							const div = document.createElement('div')
							/* 下面的data.content就是后台返回接收到的数据 */
							div.innerHTML = data.data
							document.body.appendChild(div)
							document.forms[0].submit()
					}})
					break;
				case 'alipay_app':
					// 处理支付宝APP支付方式点击的逻辑
					alert("您点击了支付宝APP支付方式！");
					break;
					// 添加其他支付方式的处理逻辑
				default:
					break;
			}
		});
	});
</script>

</body>
</html>
